<template>
    <div class="custom-cursor"><span class="main"></span><span class="follow"></span></div>
</template>

<style lang="scss">
body, a {
    cursor: none;
}

.custom-cursor {
    opacity: 0;
    transition: opacity .25s ease;

    span {
        background: #44a1e7;
        border-radius: 100%;
        display: block;
        overflow: visible;
        pointer-events: none;
        position: fixed;

        &.main {
            width: 80px;
            height: 80px;
            text-align: center;
            transition: background .25s cubic-bezier(.77, 0, .175, 1), transform .35s cubic-bezier(.77, 0, .175, 1);
            transform: translate(-50%, -50%) scale(.125);
            z-index: 910
        }

        &.main:after {
            font-size: .65625rem;
            line-height: 1.15em;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: #fff;
            margin: auto;
            text-align: center;
            z-index: 901
        }

        &.follow {
            width: 60px;
            height: 60px;
            overflow: hidden;
            transition: background-color .25s cubic-bezier(.77, 0, .175, 1), transform .35s cubic-bezier(.77, 0, .175, 1), left .15s ease, top .15s ease;
            transform: translate(-50%, -50%) scale(.115);
            z-index: 901
        }
    }
}


.custom-cursor.hover--reg span.follow {
    background: rgba(68, 161, 231, .22);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.custom-cursor.hover--reg-dark span {
    background: #001f60
}

.custom-cursor.hover--reg-dark span.follow {
    background: rgba(4, 23, 70, .22)
}

.custom-cursor.hover--product span.main,
.custom-cursor.hover--reg-dark span.follow {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.custom-cursor.hover--product span.main {
    background: #001746
}

.custom-cursor.hover--product span.main:after {
    content: "View";
    opacity: 1;
    padding-left: 3px;
    top: 34px;
    right: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .35s cubic-bezier(.77, 0, .175, 1)
}

.custom-cursor.hover--product span.follow {
    background: transparent;
    border: 1px solid #001746;
    -webkit-transform: translate(-50%, -50%) scale(1.5);
    transform: translate(-50%, -50%) scale(1.5)
}

.custom-cursor.hover--nav-exit span.main {
    background: rgba(69, 86, 120, .85);
    -webkit-transform: translate(-50%, -50%) scale(.75);
    transform: translate(-50%, -50%) scale(.75)
}

.custom-cursor.hover--nav-exit span.main:after {
    background: transparent url("../assets/icon/nav-overlay-exit.svg") no-repeat 50%/16px;
    content: "";
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 16px;
    height: 16px;
    transition: all .35s cubic-bezier(.77, 0, .175, 1)
}
.custom-cursor.hover--nav-exit span.follow {
    background: rgba(68, 161, 231, 0);
}

.custom-cursor.hover--drag-x span.main {
    background: rgba(69, 86, 120, .85);
    -webkit-transform: translate(-50%, -50%) scale(.7);
    transform: translate(-50%, -50%) scale(.7)
}

.custom-cursor.hover--drag-x span.main:after {
    background: transparent url(https://7wyi4c8u2k-flywheel.netdna-ssl.com/wp-content/themes/whitetailgin/media/dist/img/cursor-drag-x.svg) no-repeat 50%/66px 17px;
    content: "";
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 66px;
    height: 17px;
    transition: all .35s cubic-bezier(.77, 0, .175, 1);
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.custom-cursor.hover--drag-x span.follow {
    opacity: 0
}

.custom-cursor.hover--impression span.main {
    background: #242529
}

.custom-cursor.hover--impression span.follow {
    background: rgba(224, 93, 94, .85);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.custom-cursor.hover--batonical span.main {
    background: #44a1e7
}

.custom-cursor.hover--batonical span.follow {
    opacity: 0
}

</style>

<script>
export default {
    name: 'CustomCursor',
    mounted () {
        let custom_cursor = $(".custom-cursor");
        let main = $("span.main", custom_cursor);
        let follow = $("span.follow", custom_cursor);
        let h = !1;
        if (1024 < $(window).width()) {
            $(document).on('mouseover mouseout', 'a:not(.cursor-hover--product),a:not(.cursor_close), .cursor-hover--reg, input, textarea, button', function (event) {
                custom_cursor[event.type === "mouseover" ? 'addClass' : 'removeClass']("hover--reg")
            });
            $(document).on('mouseover mouseout click', 'a.cursor_close', function (event) {
                custom_cursor[event.type === "mouseover" ? 'addClass' : 'removeClass']("hover--nav-exit")
            });


            $(document).on('hover', '.cursor-hover--reg-dark', function () {
                custom_cursor.toggleClass("hover--reg-dark")
            });
            $(".cursor-hover--product").hover(function () {
                custom_cursor.toggleClass("hover--product")
            });
            $(".cursor-hover--drag-x").hover(function () {
                custom_cursor.toggleClass("hover--drag-x")
            });
            $("footer.primary .copyright a").hover(function () {
                custom_cursor.toggleClass("hover--impression")
            });
            $("section.highlight-paragraph span.anchor").hover(function () {
                $("section.highlight-paragraph figure.image").toggleClass("active"), custom_cursor.toggleClass("hover--batonical")
            });
            $(document).mousemove(function (e) {
                var o = e.clientX, t = e.clientY;
                h || (custom_cursor.css("opacity", 1), h = !0), main.css({
                    top: t + "px",
                    left: o + "px"
                }), follow.css({
                    top: t + 0 + "px",
                    left: o + 0 + "px"
                })
            });
            $("section.highlight-paragraph").mousemove(function (e) {
                var o = e.clientX, t = e.clientY;
                h || (custom_cursor.css("opacity", 1), h = !0), $("section.highlight-paragraph figure.image").css({
                    top: t + 0 + "px",
                    left: o + 0 + "px"
                })
            });
            window.onmouseout = function () {
                custom_cursor.css("opacity", 0), h = !1
            }
        }


    }
}
</script>
